<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            width: 100%;
            height: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                movies: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                currentIndex: 0,
            }
        }

        render() {
            const {movies, currentIndex} = this.state
            const liEls = movies.map((item, index) => {
                return (<li className={currentIndex === index ? "active" : ""}
                            key={item} onClick={this.clickHandle(index)}>{item}</li>)
            })
            return (
                <ul>{liEls}</ul>
            );
        }

        clickHandle(index) {
            return () => {
                this.setState({currentIndex: index})
            }
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
